<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
<div  >
    <canvas   style="border: 1px solid #e3e3e3;" id="cav" width="2000" height="2000"></canvas>
</div>
<script >

    var ws = new WebSocket("ws://localhost:5678");

    var draw = {

        lastPackage:"",
        drawPackge:function(package){

            var ctx = document.getElementById("cav").getContext('2d');
            var idx = package['"stroke-sequence'];
            var dots = package["xy-dot-array"];
            if(dots.length == 0){
                return;
            }
            var scale =1/32*1.905*2;
            ctx.beginPath();
            ctx.moveTo(  (dots[0].x*scale).toFixed(2), (dots[0].y*scale).toFixed(2));
            for (var i = 0; i <  dots.length; i++) {

                ctx.lineTo( (dots[i].x.toFixed(2)*scale).toFixed(2),(dots[i].y*scale).toFixed(2))

            }
            ctx.stroke();
            ctx.closePath();
        }

    }

    ws.onmessage = function(res){


        var msgJson = JSON.parse(res.data);
        if(msgJson.cmd == 3){
        console.info(res)

            draw.drawPackge(msgJson.para);
        }

    }



</script>
</body>
</html>